<template>
    <div class="play-container-box" :class="{ 'over-class': isOver }">
        <a class="global-vclose" @click="handleClose"></a>
        <template v-if="!isthird">
            <div class="xgp-video" id="xgp_video">

            </div>
            <div class="bot-mask">

            </div>
        </template>
        <iframe class="ifrm-play" frameborder="0" :src="url+'&autoplay=1'" allowFullScreen="true" v-else></iframe>
    </div>
</template>

<script>
import 'xgplayer/dist/index.min.css';
import XgPlayer from 'xgplayer'
export default {
    data() {
        return {
            isOver: false,
            xPlayer: null
        }
    },
    props: ['url',{
        ismustoverflow:{
            type:Boolean,
            default:true
        }
    },'isthird'],
    mounted() {
        document.body.style.overflow = 'hidden';
        
        if(!this.isthird){
            this.initPlayer();
        }
    },
    methods: {
        handleClose(){
            document.body.style.overflow = 'inherit'
            this.$emit('close')
        },
        initPlayer() {
            this.xPlayer = new XgPlayer({
                id: 'xgp_video',
                controls: true,
                enableContextmenu: true,
                url: this.url,
                loop: true,
                lang: 'zh',
                // fitVideoSize:'auto',
                // poster:that.list[idx].image,
                width: '100%',
                height: '100%',
                autoplay: true,
                videoInit: true
            })
        }
    }
}
</script>
<style lang="less">
.ifrm-play{
    width:100%;height:100%;
}
/* 定义淡出动画 */
@keyframes fadeIn {
    from {
        /* 动画开始时 */
        transform: translate3d(0px, -1000px, 0px);
    }

    to {
        /* 动画结束时 */
        transform: translate3d(0px, 0px, 0px);
    }
}

/* 定义淡出动画 */
@keyframes fadeOut {
    from {
        /* 动画开始时 */
        transform: translate3d(0px, 0px, 0px);
    }

    to {
        /* 动画结束时 */
        transform: translate3d(0, -1000px, 0px);
    }
}

.play-container-box {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    right: 0px;
    height: 100%;
    z-index: 1000;
    background: #111;
    animation: fadeIn .3s ease forwards;

    &.over-class {
        animation: fadeOut .3s ease-in-out forwards;
    }

    .xgp-video {}

    .cover-blur {
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        height: 100%;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .8;
            filter: blur(60px);
        }
    }

    .basic {
        position: absolute;
        bottom: 79px;
        padding-left: 34px;
        // padding-bottom:28px;
        padding-right: 38px;
        left: 0px;
        right: 0px;
        z-index: 101;

        .author {
            font-size: 20px;
            font-weight: 500;

            .time {
                font-size: 14px;
                font-weight: normal;
            }
        }

        .title {
            font-size: 16px;
            line-height: 22px;
            margin-top: 16px;
            margin-bottom: 44px;
        }
    }
    
    .bot-mask{
        position: absolute;
        bottom:0px;
        right:0px;left:0px;
        height:233px;
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
        z-index:100;
    }
}
</style>